@charset "utf-8";
@import "common/common";

header{
    position: absolute;
    width: 100%;
    height: r(64);
    top: 0;
    left: 0;
    .search{
        height: r(64);
        background: white;
        font-size: 0;
        a{
            display:inline-block;
            width: r(22);
            height: r(38);
            vertical-align: middle;
            margin-left: r(28);
            margin-top: r(14);
            img{
                @include img();
            }
        }
        input{
            display: inline-block;
            width: r(520);
            height: r(50);
            line-height: r(50);
            background: #f2f2f2;
            border: none;
            font-size: r(30);
            vertical-align: middle;
            text-indent: r(40);
            margin-top: r(14);
            margin-left: r(22);
            appearance: none;
            -webkit-appearance: none;
            -moz-appearance: none;
            -ms-appearance:none;
        }
        input:-moz-placeholder{color:#9b9b9b;text-indent: r(200);}
        input:-ms-input-placeholder{color:#9b9b9b;text-indent: r(200);}
        input::-webkit-input-placeholder{color:#9b9b9b;text-indent: r(200);}
        .iconfont{
            color: #7a7a7a;
            font-size: r(30);
            position: relative;
            right: r(254);
            top: r(16);
        }
    }
}
section{
    width: 100%;
    position: absolute;
    top: r(72);
    bottom: 0;
    overflow-y: scroll;
    -webkit-overflow-scrolling: touch;
    .navbar{
        width: 100%;
        height: r(49);
        border-bottom: 1px solid #ab9e9e;
        margin-top:r(15) ;
        position: relative;
        li{
            float: left;
            width: 25%;
            height: r(48);
            line-height: r(48);
            text-align: center;
            
            a{
                font-size: r(26.67);
                color: #000000;
                vertical-align: top;
            }
            &.active,&:hover{
                border-bottom: 2px solid #333333;
            }
        }
    }
    article{
        .userInfo{
            width: 100%;
            margin-top: r(14);
                .userImg{
                    width: r(58);
                    height: r(58);
                    margin-left: r(14);
                    overflow: hidden;
                    border-radius: 50%;
                    a{
                        @include img();
                        img{
                            @include img();
                        }
                    }
                }
                .userPer{
                    .perText{
                        font-size: 0;
                        span{
                            display: inline-block;
                            vertical-align: middle;
                            &:first-child{
                                font-size: r(26);
                                color: rgba(0,0,0,.9);
                                margin-left: r(14);
                                margin-right: r(4);
                            }
                            &:nth-child(2),&:nth-child(3){
                                width: r(60);
                                height: r(23);
                                font-size: r(24);
                                text-align: center;
                                line-height: r(23);
                                color: rgba(0,0,0,.53);
                                margin-right: r(8);
                                border-radius: 15%;
                                border: 1px solid #e5e5e5;
                            }
                        }
                    }
                    .perWatch{
                        height: r(30);
                        margin-left: r(14);
                        p{
                            display: inline-block;
                            vertical-align: top;
                            font-size: 0;
                            font-size: r(21.34);
                            color: rgba(0,0,0,.5);
                            .iconfont{
                                font-size: r(24);
                            }
                        }
                    }
                }
            .add{
                width: r(25);
                height: r(25);
                margin-top: r(20);
                margin-right: r(26);
                a{
                   display: block;
                   @include img();
                   img{
                       @include img();
                   }
                }
            }
           .userShow{
               width: 100%;
               margin-top: r(12);
               li{
                   float: left;
                   height: r(212);
                   margin-right:r(2); 
                   &:nth-child(1){
                       width: r(213);
                       overflow: hidden;
                   }
                   &:nth-child(2){
                       width: r(105);
                       overflow: hidden;
                   }
                   &:nth-child(3){
                       width: r(104);
                       overflow: hidden;
                   }
                   &:nth-child(4){
                       width: r(211);
                       overflow: hidden;
                       margin-right: 0;
                   }
                   img{
                       @include img();
                   }
               }
           } 
        }
    }
}
